<template>
  <div class="app-wrapper">
    <div class="header">
      <!-- ... 其他内容 ... -->
    </div>
    <div class="content">
      <div class="edit">
        <!-- 监听 input 事件时调用 handleInput 方法 -->
        <textarea class="edit-textarea" v-model="textValue" @input="handleInput"></textarea>
      </div>
      <div class="preview" v-html="htmlVal"></div> <!-- 假设你想要将编译后的 HTML 显示在这里 -->
      <div class="link"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import {marked} from 'marked';

// 确保 @Options 装饰器位于类定义之前
@Options({
  components: {},
  data() {
    return {
      textValue: '',
      htmlVal: ''
    };
  },
  methods: {
    handleInput(event: Event) {
      const value = (event.target as HTMLTextAreaElement).value;
      console.log('Textarea input:', value);
      this.htmlVal = marked(value); // 将 Markdown 转换为 HTML 并更新到响应式属性
    }
  }
})
export default class App extends Vue {}
</script>
<style lang="less">
/* 隐藏所有内部元素的滚动条 */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}
.app-wrapper {
  width: 95vw;
  height: 95vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: auto;
  div {
    border: solid 1px rgb(110, 108, 108);
  }
  .header {
    height: 5%;
    display: flex;
    .title {
      width: 30%;
      height: 100%;
    }
    .btn-list {
      width: 60%;
      height: 100%;
    }
    .user-info {
      width: 10%;
      height: 100%;
    }
  }
  .content {
    flex: 1;
    display: flex;
    .edit {
      height: 100%;
      width: 45%;
      overflow: scroll;
      .edit-textarea{
        width: 100%;
        height: 100%;
        outline: none;
        border: none;
      }
    }
    .preview {
      height: 100%;
      width: 45%;
      overflow: scroll;
    }
    .link {
      height: 100%;
      width: 10%;
      overflow: scroll;
    }
  }
}
</style>
